<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="app"></div>
</body>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">

    class App extends React.Component {

        constructor() {
            super();
            this.state = {
                movies: ["星际穿越", "大话西游", "盗梦空间", "少年派"]
            }
        }

        render() {
            // let movieList = [];
            // for (let i of this.state.movies) {
            //     movieList.push((<li key={i}>{i}</li>))
            // }
            // return (
            //     <div>
            //         <ul>
            //             {movieList}
            //         </ul>
            //     </div>
            // );
            return (
                <div>
                    {
                        this.state.movies.map((item) => {
                            return (<li> {item} </li>)
                        })
                    }
                </div>
            )
        }
    }

    ReactDOM.render(<App/>
        , document.getElementsByClassName('app')[0]);
</script>
</html>